<template>
  <div class="Detail1">
    <div class="mixin">
      <div class="right">
        <div class="search-info">
          <div class="ans">
            <div class="search-result-area">
              <div class="operation-bar">
                <div>
                  <el-button type="danger" class="s" @click="del" plain
                    >删除记录</el-button
                  >
                </div>
                <div class="right-operations">
                  <!-- 筛选下拉菜单 -->
                  <div class="filter-container">
                    <el-dropdown @command="handleFilterChange">
                      <span class="filter-text">
                        <!-- {{ filterTime ==0? "近一周":filterTime ==1? "近一月" : "近一年"}} -->
                        筛选
                        <i class="iconfont icon-shaixuan"></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="0">近一周</el-dropdown-item>
                        <el-dropdown-item command="1">近一月</el-dropdown-item>
                        <el-dropdown-item command="2">近一年</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                    <div class="pagination-controls">
                      <i
                        class="iconfont icon-icon-zuoyouqiehuan-zuo"
                        @click="handlePrevPage"
                        :class="{ disabled: currentPage === 1 }"
                      ></i>
                      <div class="page-info">
                        {{ currentPage }}/{{ totalPages }}
                      </div>
                      <i
                        class="iconfont icon-icon-zuoyouqiehuan-you"
                        @click="handleNextPage"
                        :class="{ disabled: currentPage === totalPages }"
                      ></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="result-list-container">
            <CommonTable
              :tableData="searchResults"
              :columns="columns"
              :loading="isLoading"
              :showSelection="true"
              @selection-change="handleSelectionChange"
            >
              <template #operation="scope">
                <el-button
                  type="text"
                  color="#409EFF"
                  @click="handleDelete(scope.scope.row)"
                >
                  删除
                </el-button>
              </template>
              <template #img="scope">
                <el-button
                  type="text"
                  color="#409EFF"
                  @click="showImgViewer(scope.scope.row)"
                >
                  查看图片
                </el-button>
              </template>
            </CommonTable>
            <!-- 加载状态提示
            <div class="loading-tip" v-if="isLoading">
              加载中...
            </div> -->

            <!-- 空状态 -->
            <div
              class="empty-state"
              v-if="searchResults.length === 0 && !isLoading"
            >
              <div class="aa">
                <img src="../assets/img/wu.png" alt="空状态" />
                <div class="empty-text">暂无数据</div>
              </div>
            </div>
          </div>

          <!-- 分页组件 -->
          <div class="pagination" v-if="searchResults.length > 0">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              layout="prev, pager, next, jumper"
              :total="totalCount"
              prev-text="上一页"
              next-text="下一页"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-image-viewer
      v-if="imgViewerVisible"
      :on-close="closeImgViewer"
      :url-list="imgList"
    />
  </div>
</template>

<script>
import service from "@/service/service";
import CommonTable from "../components/CommonTable.vue";
export default {
  components: {
    CommonTable,
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer"),
  },
  data() {
    return {
      imgViewerVisible: false,
      imgList: [],
      columns: [
        
        {
          label: "资源名称", 
          prop: "feedbackContent", 
          align: "left", 
        },
        {
          label: "资源类型",
         prop: "feedbackContent", 
        },
 {
          label: "认领内容",
         prop: "feedbackContent", 
        },
         {
          label: "认领情况",
         prop: "feedbackContent", 
        },
        {
         label:'认领人',
         prop:'feedbackContent',
        },
        {
          label: "提交时间",
          prop: "createTime",
          sortable: true,
        },
    

        {
          label: "操作",
          slotName: "operation",
          width: 100,
        },
      ],
      isLoading: false,
      currentPage: 1,
      totalCount: 0,
      pageSize: 10,
      searchResults: [],
      selectedIds: [],
      filterTime: 0,
    };
  },
  computed: {
    totalPages() {
      if (this.totalCount === 0) return 1;
      return Math.ceil(this.totalCount / this.pageSize);
    },
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedIds = selection.map((item) => item.feedbackId);
    },
    async fetchData() {
      if (this.isLoading) return;

      try {
        this.isLoading = true;
        const params = {
          page: this.currentPage,
          pageSize: this.pageSize,
          time: this.filterTime,
        };
        const response = await service({
          url: "/frontend/resourceAuthor/list",
          method: "post",
          data: params,
        });
        if (response.code == 200) {
          this.searchResults = response.data.list;
          this.totalCount = response.data.total;
        } else {
          this.$message.error(response.msg);
        }
      } catch (error) {
        console.error("获取反馈列表失败：", error);
      } finally {
        this.isLoading = false;
      }
    },

    showImgViewer(row) {
      console.log(row);
      this.imgList = row.feedbackFileIds
        .split(";")
        .map((id) => `/api/frontend/file/download/${id}`);
      console.log(this.imgList, "11111");

      this.imgViewerVisible = true;
      const m = (e) => {
        e.preventDefault();
      };
      document.body.style.overflow = "hidden";
      document.addEventListener("touchmove", m, false); // 禁止页面滑动
    },
    closeImgViewer() {
      this.imgViewerVisible = false;
      const m = (e) => {
        e.preventDefault();
      };
      document.body.style.overflow = "auto";
      document.removeEventListener("touchmove", m, true);
    },
    del() {
      if (this.selectedIds.length == 0) {
        this.$message.warning("请选择要删除的反馈");
        return;
      } else {
        let row = { feedbackId: this.selectedIds };
        this.handleDelete(row, 1);
      }
    },
    handleDelete(row, de) {
      this.$confirm(`删除后将无法自动恢复，确定要删除吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            const res = await service.post("/frontend/feedback/delete", {
              idList: de == 1 ? row.feedbackId : [row.feedbackId],
            });
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.fetchData();
            } else {
              this.$message.error(res.msg || "删除失败");
            }
          } catch (error) {
            console.error("删除失败:", error);
            this.$message.error("删除失败，请重试");
          }
        })
        .catch(() => {});
    },
    handlePrevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.fetchData();
      }
    },

    // 下一页
    handleNextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.fetchData();
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.selectedIds = [];
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.selectedIds = [];
      this.fetchData();
    },
    handleFilterChange(timeRange) {
      this.filterTime = timeRange;
      this.currentPage = 1;
      this.selectedIds = [];
      this.fetchData();
    },
  },
  created() {
    this.fetchData();
  },
};
</script>

<style lang="scss" scoped>
.s{
  background: #FFFFFF;
border-radius: 4px;
border: 1px solid #FF0000;
}
.pagination-controls {
  margin-left: 34px;
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #333;

  .page-info {
    padding: 0 17px;
  }

  i {
    cursor: pointer;

    &.disabled {
      cursor: not-allowed;
      color: #ccc;
    }
  }
}
.pagination {
  display: flex;
  justify-content: flex-end;
}

.loading-tip,
.no-more-tip {
  text-align: center;
  padding: 20px 0;
  color: #666;
  font-size: 14px;
}

.no-more-tip {
  color: #999;
}

::v-deep .el-pager li {
  background-color: #f9faff;
}

::v-deep .el-pagination .btn-next,
.el-pagination .btn-prev {
  background-color: #f9faff;
}
::v-deep .el-pagination button:disabled {
  background-color: #f9faff;
}
::v-deep .el-dropdown-menu {
  min-width: 100px;
}
.ans {
  width: 1060px;
  background: #ffffff;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.07);
  border-radius: 4px;
  margin-bottom: 20px;

  .search-result-area {
    margin-bottom: 20px;

    .operation-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30px 20px;

      .right-operations {
        display: flex;
        align-items: center;

        .filter-container {
          display: flex;
          align-items: center;
          .filter-text {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 18px;
            color: #333333;
            cursor: pointer;
            display: inline-flex;
            align-items: center;

            i {
              margin-left: 5px;
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.loading-tip {
  text-align: center;
  padding: 20px 0;
  color: #666;
  font-size: 14px;
}

.search-info {
  width: 1060px;
}

.result-list-container {
  width: 1060px;
  border: 1px solid #e0e0e0;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 160px 0;
  color: #999;

  .aa {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #666666;

    .empty-text {
      margin-top: 18px;
    }
  }
}

::v-deep .el-pager li {
  background-color: #f9faff;
}

::v-deep .el-pagination .btn-next,
.el-pagination .btn-prev {
  background-color: #f9faff;
}

::v-deep .el-dropdown-menu {
  min-width: 100px;
}
</style>
